import { ElButton } from "element-plus";
import {defineComponent, ref} from "vue";
import BreadCrumb from "~/src/components/BreadCrumb";
import DoctorInfo from "~/src/components/DoctorInfo";
import Input from "~/src/components/Input";
import Pagination from "~/src/components/Pagination";
import SelectDate from "~/src/components/SelectDate";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import DoctorInfoV2 from "~/src/components/DoctorInfoV2";
import router from "@/router";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";
import {DateItem, Doctor} from "@/api/typing";
import {closeLoading, showLoading} from "@/utils";
import {getMzpbYs} from "@/api/his";
import {usePage} from "@/utils/hooks";
import {useRoute} from "vue-router";
import {ghStore} from "@/store/modules/yvyue";


export default defineComponent({
    setup(props) {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080
        const pageSize = ref(KEEP_VIDEO_TOP ? 3 : 4);

        const doctor = ref<Doctor[]>([]);
        // 分页组件返回当页数据
        const handlePageChange = (Datas:any) => {
            doctor.value = Datas;
        };
        const breadcrumbStore = useBreadcrumbStore(); // 实例化Pinia存储
        const ghstore = ghStore(); // 实例化Pinia存储

        // 跳转到挂号页面并携带医生信息
        const goToRegistration = (doctor: Doctor) => {
            // 只有有号的医生可以点击跳转
            if (doctor.status === '有号') {
                breadcrumbStore.addTitle(doctor.DOCTORNAME);

                // 存储当前选择的医生信息
                ghstore.setSelectDoctor(doctor);
                router.push(
                    {
                        path: '/hyxz',
                        query: {
                            week:week.value,
                            RQ:todayrq.value,
                            doctorInfo: JSON.stringify(doctor)
                        }
                    })
                // router.push({
                //     name: 'hyxz',
                //     params: {
                //         doctorId: doctor.id,
                //         date: '2022-03-12',
                //         // 通过query传递完整医生信息
                //         doctorInfo: JSON.stringify(doctor)
                //     }
                // })
            }
        }
        //当前日期
        const todayrq = ref<string>("");
        const week = ref<string>("");
        // 日期选择按钮
        function someFunction(date: DateItem) {
            todayrq.value = date.rq ;
            week.value = date.week;
            // 存储当前选择日期数据
            ghstore.setSelectDate(date);
            getMzpbYsData();
        }

        const page = usePage(500);
        const ZSId = ghstore.zs?.ZS_ID || "";
        const doctors = ref<Doctor[]>([]);
        //获取挂号类型
        const titlelx = breadcrumbStore.titlelx;
        //获取医生
        async function getMzpbYsData() {
            showLoading()
            if (titlelx === '挂号'){
                // 获取当前日期
                const date = new Date();
                todayrq.value = `${date.getMonth() + 1}月${date.getDate()}日`.padStart(6, '0').replace(/(\d{1})月(\d{1})日/, '0$1月0$2日');
                //获取当前星期几，确认信息页面需要显示
                week.value = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][date.getDay()];
                ghstore.setSelectDate({rq:todayrq.value,week:week.value})
            }
            const res = await getMzpbYs({
                ...page.getParam(),
                ZS_ID: ZSId ,
                rq: todayrq
            })
            doctors.value = res.rows!;
            closeLoading();
        }
        getMzpbYsData();

        return () => <>
            <UserInfo></UserInfo>
            <Steps></Steps>

            <div class={Style.container_mar} >
                <div class={Style.title}>
                    <div>
                        <BreadCrumb style={{height:'40px',marginTop:'10px'}}></BreadCrumb>
                    </div>
                    {titlelx === '预约' && <div>
                        {/*<SelectDate class={Style.selectStyle}></SelectDate>*/}
                        <SelectDate
                            class={Style.selectStyle}
                            onDateChange={(date: DateItem) => {
                                someFunction(date)
                            }}
                        ></SelectDate>
                    </div>}
                </div>

                <div class={Style.body}>
                    <div class={Style.doc_style}>
                        {
                            KEEP_VIDEO_TOP ? doctor.value.map(doc => (
                                <DoctorInfoV2
                                    key={doc.YS_ID}
                                    docId={doc.YS_ID}
                                    docPicture={doc.PIC}
                                    name={doc.DOCTORNAME}
                                    title={doc.ZC_MC}
                                    introduce={doc.GRJJ}
                                    hyzt={doc.status}
                                    onClick={() => goToRegistration(doc)}
                                >
                                    {{
                                        btn: () => {
                                            return (
                                                <ElButton
                                                    type="success"
                                                    disabled={doc.status !== '有号'}
                                                    onClick={() => goToRegistration(doc)}
                                                >
                                                    立即挂号
                                                </ElButton>
                                            )
                                        }
                                    }}
                                </DoctorInfoV2>
                            )) : doctor.value.map(doc => (
                                <DoctorInfo
                                    key={doc.YS_ID}
                                    docPicture={doc.PIC}
                                    name={doc.DOCTORNAME}
                                    title={doc.ZC_MC}
                                    introduce={doc.GRJJ}
                                    hyzt={doc.status}
                                    onClick={() => goToRegistration(doc)}
                                >
                                    {{
                                        btn: () => {
                                            return (
                                                <ElButton
                                                    type="success"
                                                    disabled={doc.status !== '有号'}
                                                    onClick={() => goToRegistration(doc)}
                                                >
                                                    立即挂号
                                                </ElButton>
                                            )
                                        }
                                    }}
                                </DoctorInfo>
                            ))
                        }
                    </div>
                </div>

                <Pagination
                    style={{ marginTop: '43px', padding: "0 64px" }}
                    pageSize={pageSize.value}
                    Data={doctors.value}
                    onPageChange={handlePageChange}
                ></Pagination>
            </div>
        </>
    }
})
